<template>
  <div class="external-link-container">
    <el-loading v-if="loading" text="正在跳转到外部链接..."></el-loading>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const loading = ref(true)

onMounted(() => {
  // 从路由meta中获取外链地址
  const externalUrl = route.meta.externalUrl
  if (externalUrl) {
    // 新窗口打开外链
    window.open(externalUrl, '_blank')
    // 返回上一页（避免停留在空白的外链页面）
    router.back()
  } else {
    // 无外链地址时跳404
    router.push('/404')
  }
  loading.value = false
})
</script>

<style scoped>
.external-link-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
